<template>
  <div id="app">
    <Header />
    <main>
      <Hero />
      <div class="app-container">
        <About />
        <Skills />
        <Projects />
        <Experience />
        <Education />
        <Contact />
      </div>
    </main>
    <Footer />
    <button
      v-if="showBackToTop"
      class="back-to-top"
      @click="scrollToTop"
      :class="{ 'visible': showBackToTop }"
    >
      <span>↑</span>
    </button>
    <div class="background-effects">
      <div
        v-for="(code, index) in floatingCodes"
        :key="index"
        class="floating-code"
        :style="{ animationDelay: `${index * 2}s` }"
        v-text="code"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Header from './components/Header.vue'
import Hero from './components/Hero.vue'
import About from './components/About.vue'
import Skills from './components/Skills.vue'
import Projects from './components/Projects.vue'
import Experience from './components/Experience.vue'
import Education from './components/Education.vue'
import Contact from './components/Contact.vue'
import Footer from './components/Footer.vue'

const showBackToTop = ref(false)
const floatingCodes = ['{}', '< >', '{ }', '< >', '&&', '||']

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 500
}

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)

  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1'
        entry.target.style.transform = 'translateY(0)'
      }
    })
  }, observerOptions)

  document.querySelectorAll('.fade-in').forEach(el => {
    el.style.opacity = '0'
    el.style.transform = 'translateY(20px)'
    el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'
    observer.observe(el)
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
main {
  position: relative;
  z-index: 1;
}

.app-container {
  width: 100%;
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--bg-card);
  border: 2px solid var(--accent-blue);
  border-radius: 50%;
  color: var(--accent-blue);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--accent-blue);
  color: var(--bg-primary);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
  transform: translateY(-5px);
}

.background-effects {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-code {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8rem;
  color: rgba(0, 217, 255, 0.03);
  animation: float 20s linear infinite;
  user-select: none;
}

.floating-code:nth-child(1) {
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

.floating-code:nth-child(2) {
  top: 30%;
  right: -5%;
  animation-delay: -4s;
  font-size: 6rem;
}

.floating-code:nth-child(3) {
  top: 50%;
  left: 10%;
  animation-delay: -8s;
  font-size: 7rem;
}

.floating-code:nth-child(4) {
  top: 70%;
  right: 10%;
  animation-delay: -12s;
  font-size: 5rem;
}

.floating-code:nth-child(5) {
  top: 20%;
  left: 50%;
  animation-delay: -16s;
  font-size: 6rem;
}

.floating-code:nth-child(6) {
  top: 80%;
  left: -5%;
  animation-delay: -20s;
  font-size: 7rem;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-50px) rotate(180deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 0.3;
  }
}

@media (max-width: 768px) {
  .floating-code {
    font-size: 3rem;
  }

  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
  }
}
</style>
